<template>
  <el-tabs v-model="activeName" class="tabs">
    <el-tab-pane label="Params" name="Params">
      <editTable
        :target="selectedComponent.request.requestParams.Params"
        @update="paramsUpdate"
      />
    </el-tab-pane>
    <el-tab-pane label="Body" name="Body">
      <div class="body">
        <el-radio-group v-model="radio">
          <el-radio v-for="(op, index) of rodiaArr" :key="index" :label="op">{{
            op
          }}</el-radio>
        </el-radio-group>
        <div class="con">
          <div class="none" v-if="radio == 'none'">该接口没有Body请求体</div>
          <editTable
            v-else-if="radio == 'form-data' || radio == 'x-www-form-urlencoded'"
            :target="selectedComponent.request.requestParams.Body[radio]"
            @update="bodyUpdate"
          />
          <div class="json" v-else-if="radio == 'json'">
            <monaco-editor
              v-model:modelValue="
                selectedComponent.request.requestParams.Body[radio]
              "
              width="100%"
              height="120px"
              language="json"
            />
          </div>
          <div class="json" v-else-if="radio == 'xml'">
            <monaco-editor
              v-model:modelValue="
                selectedComponent.request.requestParams.Body[radio]
              "
              width="100%"
              height="120px"
              language="html"
            />
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="Header" name="Header">
      <editTable
        :target="selectedComponent.request.requestParams.Header"
        @update="headerUpdate"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { useStore } from "vuex";
import { ref, computed } from "vue";
import editTable from "./editTable.vue";
import monacoEditor from "@/components/MonacoEditor/index.vue";

let store = useStore();
let activeName = ref("Params");
let radio = ref("none");
let selectedComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent;
});
let rodiaArr = computed(() => {
  let body = selectedComponent.value.request.requestParams.Body;
  let keys = Object.keys(body);
  keys.unshift("none");
  return keys;
});

function paramsUpdate(val) {
  selectedComponent.value.request.requestParams.Params = val;
}

function headerUpdate(val) {
  selectedComponent.value.request.requestParams.Header = val;
}

function bodyUpdate(val) {
  if (radio.value == "form-data" || radio.value == "x-www-form-urlencoded") {
    selectedComponent.request.requestParams.Body[radio] = val;
  }
}
</script>
<style scoped lang="scss">
.tabs {
  width: 100%;
  height: 100%;
  :deep(.el-tabs__item.is-active) {
    background: none;
  }
  .body {
    :deep(.el-radio__label) {
      color: #444 !important;
    }
    .none {
      height: 100px;
      line-height: 30px;
      padding: 10px;
      border: 1px solid #666;
      border-radius: 5px;
    }
  }
}
</style>
